<template>
<div :id="id+'-note'">
<div :name="name" :id="id">
    <slot>

    </slot>
</div>
</div>
</template>
<script>
import {IO} from '../util/io'
import toast from '../util/toast'

export default{
    ready(){

        let _this = this

        if(this.uploadImageUrl){
            $('#'+this.id).summernote({
                height: this.height? this.height: null,
                width: this.width? this.width: null,
                minHeight:this.minHeight? this.minHeight: null,
                maxHeight: this.maxHeight? this.maxHeight: null,
                lang: 'zh-CN',
                callbacks:{
                    onImageUpload: function(files, editor, welEditable){
                        console.log('-----------------------')

                        Metronic.blockUI({
                            target: '#'+_this.id+'-note',
                            // animate: true
                            textOnly: true,
                            message: '图片上传中...'
                        });

                        _this.sendFile(files[0],editor,welEditable);
                    }
                }
                
            });
        }else{
            $('#'+this.id).summernote({
                height: this.height? this.height: null,
                width: this.width? this.width: null,
                minHeight:this.minHeight? this.minHeight: null,
                maxHeight: this.maxHeight? this.maxHeight: null,
                lang: 'zh-CN',
                
            })
        }
    },
    methods:{
        sendFile(file, editor, welEditable){
            if(this.uploadImageUrl){
                let io = new IO({
                    url: this.uploadImageUrl
                })

                io.advancePost({
                    img: file
                },(res)=>{
                    Metronic.unblockUI('#'+this.id+'-note');
                    console.log('==================')

                    if(res.code === 0){

                        console.log(res.data)

                        // editor.insertImage(welEditable, res.data.fileAccess+res.data.imgURLs[0]+'');
                        $('#'+this.id).summernote('editor.insertImage', res.data.fileAccess+res.data.imgURLs[0]+'')
                    }else{
                        toast('warning', res.msg, '提示')
                    }
                },(msg)=>{
                    Metronic.unblockUI('#'+this.id+'-note');
                    toast('warning', msg, '提示')
                })
            }
        }
    },
    props:{
        id:{
            type: String,
            default: new Date().getTime()
        },
        name:{
            type: String,
            default: ''
        },
        height: {
            type: Number,
            default: 0
        },
        width:{
            type: Number,
            default: 0
        },
        minHeight:{
            type:Number,
            default: 0
        },
        maxHeight:{
            type: Number,
            default: 0
        },
        data:{
            // type: Object,
            twoWay: true
        },
        get:{
            type:Boolean,
            twoWay: true,
            default: false
        },
        uploadImageUrl:{
            type:String,
            default: ''
        }
    },
    watch:{
        get(value){
            if(value){
                this.data = $('#'+this.id).summernote('code').trim()
                this.get = false
            }
        }
    }
}
</script>